<template>
    <div class="TaskWarp">
        <div class="divMain TUPIANPAIXU" @click.stop>
            <div class="divTitle" v-if="!Questions.transit">
                <h2>{{Questions.child.QtypeName}}：{{Questions.child.QuestionRemark}}</h2>
            </div>
            <div class="tigan" id="tigan" v-html="Questions.child.stem[0].StemContent"></div>
            <div class="divContent" :style='{top: !Questions.transit? divContentTop:divContentMinTop}'>
                <div class="touchMove" @touchstart="TOUCHMOVE" @mousedown="TOUCHMOVE" v-if="!Questions.transit"></div>
                <div class="boxContent">
                    <div class="chooseList" style="height: 100%">
                        <draggable class="picPaiXu" v-model="Questions.child.stem[0].opts" @end="SetAnswer">
                            <div class="divItem noSwipwe" v-for="(item,index) in Questions.child.stem[0].opts" v-bind:data-value="'['+(item.OptionNumber)+']'">
                                <div class="cont" v-html="item.OptionContent"></div>
                                <span class="OptionsIndex">{{index+1}}</span>
                            </div>
                        </draggable>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import draggable from 'vuedraggable'
import publicFun from '../../../../assets/js/public.js'
import AnswerHelper from '../../../../assets/js/AnswerHelper.js'
export default {
    name: "tuPianPaiXu",
    props: ["Questions","defAnswer"],
    computed: mapGetters([
        'divContentTop',
        'divContentMinTop'
    ]),
    methods: {
       ...mapActions([
            'TOUCHMOVE'
        ]),
        SetAnswer(){
            var dxxz = $('div.TUPIANPAIXU:first');
            var _answer = [];
            dxxz.find('div.divItem').each(function (i,v) {
                var dv = JSON.parse($(v).attr('data-value'));
                if ($.isArray(dv)) {
                    for (var i in dv) {
                        _answer.push(dv[i] + '');
                    }
                }
            });

            this.defAnswer.AnswerTimeJsCut=new Date().getTime()
            this.defAnswer.Answer=JSON.stringify(_answer)
            AnswerHelper.SetAnswer(this.defAnswer)
        }
    },
    components: {
        draggable,
    },
    mounted() {
        var _this = this
        _this.SetAnswer()
        publicFun.touchMove('touchMove')
        $('.cont p img').each(function () {
            $(this).upImgSrc()
        })
        _this.Questions.child.stem[0].opts.forEach(function (ele) {
            ele.OptionContent = ele.OptionContent.replace(/\/Resource/, picSrc + '/Resource')
        })
    },
    data() {
        return {}
    }
}


</script>

<style lang="scss" rel="stylesheet/scss">
.picPaiXu {
    height: 100%;
    overflow: scroll;
    display: flex;
    flex-wrap: wrap;
    .divItem {
        width: 23%;
        height: 35%;
        margin: 1%;
        overflow: hidden;
        background: #EFF3F6;
        position: relative;
        border-radius: 20px;
        p {
            height: 100%;
            width: 100%;
            img {
                height: 80%;
                width: 80%;
                display: block;
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
            }
        }
        .OptionsIndex {
            display: block;
            text-align: center;
            height: 20px;
            line-height: 20px;
            width: 20px;
            font-size: 16px;
            color: #fff;
            border-radius: 50%;
            background: #0073ff;
            border: 3px rgba(50, 190, 255, 0.26) solid;
            position: absolute;
            top: 5px;
            left: 0;
            right: 0;
            margin: auto;
        }
    }
}
</style>
<style lang="scss" rel="stylesheet/scss" scoped>
@import '../../../../assets/css/public.scss';

.TaskWarp {
    height: 90%;
    width: 90%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    .divMain {
        position: absolute;
        overflow: hidden;
        height: 100%;
        width: 100%;
        .divContent {
            position: absolute;
            top: 140px;
            left: 0;
            width: 100%;
            overflow: hidden;
            height: 100%;
            .boxContent {
                overflow: scroll;
            }
        }
        .current span {
            color: #666;
        }
    }
}
</style>
